<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>长图滚动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: skyblue;
        }
        #box{
            overflow: hidden;
            width: 480px;
            height: 600px;
            position: relative;
            margin: 50px auto;
            /* background-color: black; */
        }
        #img{
            position: absolute;
            top: 0px;
        }
        #top{
            position: absolute;
            width: 480px;
            height: 300px;
            /* background-color: white; */
        }
        #button{
            position: absolute;
            width: 480px;
            height: 300px;
            /* background-color: white; */
            top: 300px;
        }
    </style>
</head>
<body>
    <div id="box">
        <img src="1.png" alt="" id="img">
        <span id="top"></span>
        <span id="button"></span>
    </div>
    <script>
        window.onload = function(){
            var img = document.getElementById('img');
            var top = document.getElementById('top');
            var button = document.getElementById('button');
            var index = 0, timer = null;
            top.onmouseover = function (){
                clearInterval(timer)
                timer = setInterval(function (){
                    index = index + 15
                    if(index <= 0 ){
                        img.style.top = index + 'px'
                    }else{
                        clearInterval(timer)
                    }
                },100);
            }
            top.onmouseleave = function(){
                clearInterval(timer)
            }
            button.onmouseover = function (){
                clearInterval(timer)
                timer = setInterval(function (){
                    index = index - 15
                    if(index >= -7600){
                        img.style.top = index + 'px'
                    }else{
                        clearInterval(timer)
                    }
                },100);
            }
            button.onmouseleave = function(){
                clearInterval(timer)
            }





        }
    </script>
</body>
</html>